﻿@{
    ViewBag.Title = ".NET+MVC4+IbatisNet+log4net+ExtJS5";
}


<link href="~/Scripts/ext-theme-neptune-all.css" rel="stylesheet" />

<script src="~/Scripts/ext-all.js"></script>
<script>

    Ext.define('User', {
        extend: 'Ext.data.Model',
        fields: [
            { name: 'id', type: 'int' },
            { name: 'user_name', type: 'string' },
            { name: 'password', type: 'string' },
            { name: 'regist_date', type: 'string', defaultValue: Ext.Date.format(new Date(), 'Y-m-d H:i:s') },
            { name: 'last_login_date', type: 'string' },
            { name: 'login_count', type: 'string' },
            { name: 'user_type', type: 'int', defaultValue: 0 }
        ],
        proxy: {
            type: 'rest',
            api: {
                read: '/home/list'
            }
        }
    });


    var store = Ext.create('Ext.data.Store', {
        model: 'User',
        autoLoad: true
    });

    var selModel = Ext.create('Ext.selection.CheckboxModel', {
        listeners: {
            selectionchange: function (sm, selections) {
                console.log(this);
                console.log(selections);
                grid.down('#deleteUser').setDisabled(selections.length === 0);
            }
        }
    });

    var grid = Ext.create('Ext.grid.Panel', {
        title: "测试",
        margin:20,
        renderTo: document.body,
        store: store,
        selModel: selModel,
        forceFit: true,
        tbar: [
            { text: '新增', handler: addUser },
            { text: '删除', id: "deleteUser", handler: deleteUser }
        ],
        columns: [
            { text: "用户名", width: 120, dataIndex: 'user_name', sortable: false, align: 'center' },
            { text: "注册日期", width: 120, dataIndex: 'regist_date', sortable: false, align: 'center' },
            { text: "上次登录日期", width: 120, dataIndex: 'last_login_date', sortable: false, align: 'center' },
            { text: "登录次数", width: 120, dataIndex: 'login_count', sortable: false, align: 'center' },
            { text: "用户类型", width: 120, dataIndex: 'user_type', sortable: false, align: 'center' },
            { text: "操作", width: 120, dataIndex: 'id', sortable: false, align: 'center', renderer: function (value, metaData) { return '<a href="javascript:void(0);" onclick="modifyUser(' + value + ')">修改</a>'; } }
        ]
    });

    function modifyUser(id) {
        var record = store.findRecord('id', id);
        var win = addUser();
        win.setTitle('修改用户');
        win.down('form').loadRecord(record);
    }

    function addUser() {

        return Ext.create('Ext.window.Window', {
            title: '新增用户',
            width: 400,
            modal: true,
            constrain: true,
            items: {
                xtype: 'form',
                border: 0,
                jsonSubmit: true,
                bodyPadding: 20,
                url: '/home/add',
                defaults: {
                    labelAlign: 'right',
                    msgTarget: 'side'
                },
                defaultType: 'textfield',
                items: [{
                    xtype: 'hidden',
                    name: 'id',
                    value: 0
                }, {
                    fieldLabel: '用户名',
                    name: 'user_name',
                    allowBlank: false
                }, {

                    inputType: 'password',
                    fieldLabel: '密码',
                    name: 'password',
                    allowBlank: false
                }, {
                    fieldLabel: '用户类型',
                    name: 'user_type',
                    allowBlank: false
                }],
                buttons: [{
                    text: '重置',
                    handler: function () {
                        this.up('form').getForm().reset();
                    }
                }, {
                    text: '提交',
                    formBind: true,
                    disabled: true,
                    handler: function () {
                        var win = this.up('window');
                        var form = this.up('form').getForm();
                        if (form.isValid()) {
                            form.submit({
                                success: function (form, action) {
                                    win.close();
                                    Ext.Msg.alert('提示', action.result.msg, function () {
                                        store.reload();
                                    });
                                },
                                failure: function (form, action) {
                                    Ext.Msg.alert('提示', action.result.msg);
                                }
                            });
                        }
                    }
                }]

            }
        }).show();

    }


    function deleteUser() {
        var selection = selModel.getSelection();

        var ids = [];
        for (var i = 0, j = selection.length; i < j; i++) {
            ids.push(selection[i].id);
        }
        Ext.Ajax.request({
            url: '/home/delete',
            jsonData: Ext.encode(ids),
            success: function (data) {
                data=Ext.decode(data.responseText);
                if (data.success) {
                    store.reload();
                } else {
                    Ext.Msg.alert('提示', data.msg);
                }
            }

        });
    }





    Ext.EventManager.onWindowResize(function () {
        grid.doLayout();
    });



</script>

